<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <!-- 引入jquery -->
    <script src="/utils/jquery2.2.3/jquery.min.js"></script>
    <!-- 引入layui -->
    <link rel="stylesheet" href="/utils/layui-2.8.17/css/layui.css">
    <script src="/utils/layui-2.8.17/layui.js"></script>
    <!--引入时间搜索框daterangepicker-->
    <script src="/utils/daterangepicker-3.1/moment.min.js"></script>
    <script src="/utils/daterangepicker-3.1/daterangepicker.js"></script>
    <link href="/utils/daterangepicker-3.1/daterangepicker.css" rel="stylesheet">
    <!-- 引入bootstrap -->
    <link href="/utils/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="../utils/bootstrap-3.4.1/js/bootstrap.js"></script>
    <!--引入bootstrap-table-->
    <script src="/utils/bootstrap-table-1.11.1/bootstrap-table.js"></script>
    <link href="/utils/bootstrap-table-1.11.1/bootstrap-table.css" rel="stylesheet">
    <!-- 引入bootstrap-table中文语言包 -->
    <script src="/utils/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.js"></script>
    <!--引入bootstrap-select-->
    <link href="/utils/bootstrap-select-1.13.0/dist/css/bootstrap-select.min.css" rel="stylesheet">
    <script src="/utils/bootstrap-select-1.13.0/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container-fluid">
    <br>
    <!--搜索框-->
    <div class="top-toolbar" id="top-toolbar">
        <div class="form-group">
            <div class="row">
                <div class="col-sm-5">
                    <label for="searchMergeNo" class="col-sm-4 control-label">订单编号</label>
                    <div class="col-sm-7">
                        <input type="text" id="searchMergeNo" class="form-control well"/>
                    </div>
                </div>
                <div class="col-sm-5">
                    <label for="searchProductName" class="col-sm-4 control-label">商品名称</label>
                    <div class="col-sm-7">
                        <input type="text" id="searchProductName" class="form-control well"/>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5">
                    <label for="searchTime" class="col-sm-4 control-label">订单时间</label>
                    <div class="col-sm-7">
                        <input class="form-control well" id="searchTime" type="text"/>
                    </div>
                </div>
                <div class="col-sm-5">
                    <label for="searchExpressNum" class="col-sm-4 control-label">快递单号</label>
                    <div class="col-sm-7">
                        <input type="text" id="searchExpressNum" class="form-control well"/>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5">
                    <label for="searchNote" class="col-sm-4 control-label">备注</label>
                    <div class="col-sm-7">
                        <input class="form-control well" id="searchNote" type="text"/>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5">
                    <label for="searchShop" class="col-sm-4 control-label">店铺</label>
                    <select id="searchShop" class="col-sm-7 selectpicker">
                        <option value="" selected>所有</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <label for="searchRepository" class="col-sm-4 control-label">仓库</label>
                    <select id="searchRepository" class="col-sm-7 selectpicker">
                        <option value="" selected>所有</option>
                    </select>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-5">
                    <label for="searchIsFinish" class="col-sm-4 control-label">完成状态</label>
                    <select id="searchIsFinish" class="col-sm-7 selectpicker">
                        <option value="" selected>所有</option>
                        <option value="0">未完成</option>
                        <option value="1">已完成</option>
                    </select>
                </div>
                <div class="col-sm-5">
                    <label for="searchIsDelete" class="col-sm-4 control-label">删除状态</label>
                    <select id="searchIsDelete" class="col-sm-7 selectpicker">
                        <option value="">所有</option>
                        <option value="0" selected>未删除</option>
                        <option value="1">已删除</option>
                    </select>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-5">
                    <button class="btn btn-primary" id="search">查询</button>
                    <button type="button" id="reset" class="btn btn-default">重置</button>
                    <button class="btn btn-info" data-toggle="modal" data-target="#addModal">新增</button>
                </div>
            </div>
        </div>
    </div>
    <br>

    <!--定义添加模态框触发器，此处为按钮触发  -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
        <div class="modal-dialog modal-lg">
            <!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
            <div class="modal-content">
                <!--  显示模态框白色背景，所有内容都写在这个div里面  -->
                <div class="btn-info modal-header">
                    <!--  关闭按钮  -->
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <!--  标题内容  -->
                    <h4>新增订单</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <br>
                        <div class="row">
                            <label for="searchProductName" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-7">
                                <input type="text" id="addProductId" class="form-control well" style="display:none"/>
                                <input type="text" id="addProductName" class="form-control well dropdown-menu-input"
                                       autocomplete="off"/>
                                <ul class="dropdown-menu pre-scrollable" id="addProduct"></ul>
                            </div>
                        </div>

                        <div class="row">
                            <label for="addShop" class="col-sm-2 control-label">店铺</label>
                            <select id="addShop" class="col-sm-7 selectpicker"></select>
                        </div>
                        <br>
                        <div class="row">
                            <label for="addRepository" class="col-sm-2 control-label">仓库</label>
                            <select id="addRepository" class="col-sm-7 selectpicker"></select>
                        </div>
                        <br>
                        <div class="row">
                            <label for="addNote" class="col-sm-2 control-label">备注</label>
                            <div class="col-sm-7">
                                <input type="text" id="addNote" class="form-control well"
                                       placeholder="请输入备注"/>
                            </div>
                        </div>
                        <div class="row">
                            <label class="col-sm-2 control-label">是否叠加</label>
                            <div class="col-sm-7">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="isAddNum" id="addNum"
                                           value="1" checked>
                                    <label class="form-check-label" for="addNum">补发（发货数量叠加）</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="isAddNum" id="notAddNum"
                                           value="0">
                                    <label class="form-check-label" for="notAddNum">换快递发（发货数量不叠加不叠加）</label>
                                </div>
                            </div>
                        </div>
                        <div id="addTrDiv" style="margin-top:30px; width: 15%; float: right;">
                            <button class="btn btn-info" id="addOneTr" type="button">添加一行</button>
                        </div>
                        <table class="table table-bordered" id="addOrderList">
                            <thead>
                            <tr>
                                <th style="text-align:center" name="no">订单号</th>
                                <th style="text-align:center" name="productId" class="hidden-column">商品id</th>
                                <th style="text-align:center" name="productName">商品名称</th>
                                <th style="text-align:center" name="planNum">预计订单数量</th>
                                <th style="text-align:center" name="actualNum">实际订单数量</th>
                                <th style="text-align:center" name="shopId" class="hidden-column">店铺id</th>
                                <th style="text-align:center" name="shopName">店铺名称</th>
                                <th style="text-align:center" name="repositoryId" class="hidden-column">仓库id</th>
                                <th style="text-align:center" name="repositoryName">仓库名称</th>
                                <th style="text-align:center" name="expressNum">快递单号</th>
                                <th style="text-align:center" name="note">备注</th>
                                <th style="text-align:center" name="operate">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--  模态框底部样式，一般是提交或者确定按钮 -->
                    <button type="button" id="addList" class="btn btn-info">批量新增</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>

            </div><!-- /.modal-content -->
        </div>
    </div>
    <!-- /#addModal -->

    <!--数据表格-->
    <table class="table table-bordered" id="orderTable"></table>


</div>

<script src="/js/common.js"></script>
<script src="/js/inOrOutType.js"></script>
<script src="/js/shop.js"></script>
<script src="/js/repository.js"></script>
<script src="/js/product.js"></script>
<link rel="stylesheet" type="text/css" href="/css/common.css">

<script src="/js/order.js"></script>
</body>
</html>